<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
			}
			/* 关键帧 */
			@keyframes dfc{
				0%{
					transform:rotate(180deg);
				}
				30%{
					transform:rotate(360deg);
				}
			    100%{
					transform:rotate(720deg);
				}
			}
			.imgb{
				animation: dfc1 .8s linear infinite;
			}
			/* 关键帧 */
			@keyframes dfc1{
				0%{
					transform: translate(20px) rotateX(180deg) scale(1);
				}
				30%{
					transform: translate(400px) rotateX(360deg) scale(1.5);
				}
			    100%{
					transform: translate(1200px) rotateX(720deg) scale(2);
				}
			}
		</style>
	</head>
	<body>
		<img src="../img/2.gif" alt="1" />
		<audio src="../dafengche.mp3" autoplay></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			//点击 开转 图片切换并且添加样式  .imga
			$('#btn1').click(function(){
				$('img').addClass("imga");
			});
			//暂停   音乐消失+动画效果消失
			$('#btn2').click(function(){
				$('img').removeClass("imga");
				$('audio').removeAttr("src");
			});
			//翻转 切换 imga 切换 imgb
			$('#btn3').click(function(){
				$('audio').attr("src","../dafengche.mp3");
				$('img').toggleClass("imgb");
			});
		</script>
	</body>
</html>